<template>
  <div class="mod-collect">
    <div v-if="showCollect">
      <div class="mod-collect-main" v-if="!showAdd" id="collectMain">
        <h4 class="mod-collect-hd" @mousedown="moveA">
          添加到歌单
          <span class="close" @click="closeCollect">
            <i class="iconfont">&#xec47;</i>
            关闭
          </span>
        </h4>
        <div class="mod-collect-bd">
          <ul class="collect-list clearfix">
            <li class="collect-add" @click="createP">
              <div class="collect-item-l">
                <i class="iconfont">&#xe8c9;</i>
              </div>
              <h4 class="collect-item-add">新歌单</h4>
            </li>
            <li
              class="collect-item"
              v-for="(item, index) in playlists"
              :key="index"
              @click="collectS(item.id)"
            >
              <div class="collect-item-l">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="collect-item-r">
                <h4 class="collect-item-name">
                  <span v-if="index == 0">我喜欢的音乐</span>
                  <span v-else>{{ item.name }}</span>
                </h4>
                <h4 class="collect-item-num">{{ item.trackCount }}首</h4>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <my-add v-if="showAdd" @closeAdd="closeAdd" :tracks="sid"></my-add>
    <small-tip :tipMessage="smallTipMsg" v-if="showSmallTip"></small-tip>
  </div>
</template>

<script>
import MyAdd from "views/my/child/MyAdd";
import SmallTip from "components/tip/SmallTip";

export default {
  components: {
    MyAdd,
    SmallTip,
  },
  props: {
    uid: {
      type: Number,
      default() {
        return 0;
      },
    },
    sid: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      showCollect: true,
      playlists: [],
      showAdd: false,
      h: 0,
      flag: 0,
      showSmallTip: false,
      smallTipMsg: "操作提示",
    };
  },
  mounted() {
    // console.log(this.$store.state.profile);
    // console.log("ccmm");
    // console.log(this.uid);
    this.setTop();
    this.getPlaylists();
  },
  methods: {
    closeCollect() {
      this.showCollect = false;
      this.$store.commit("changeShowCollect", false);
    },
    closeAdd() {
      this.showCollect = false;
      this.showAdd = false;
      this.$store.commit("changeShowCollect", false);
    },
    collectS(pid) {
      this.axios({
        url:
          "/playlist/tracks?op=add&pid=" +
          pid +
          "&tracks=" +
          this.sid +
          "&timerstamp=" +
          Date.now(),
      })
        .then((res) => {
          // console.log(res);
          this.smallTipMsg = "收藏成功！";
          this.showSmallTip = true;
          this.showCollect = false;
          setTimeout(() => {
            this.showSmallTip = false;
            this.$store.commit("changeShowCollect", false);
            this.$store.commit("changeSId", this.sid);
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
          this.smallTipMsg = "收藏失败！";
          this.showSmallTip = true;
          this.showCollect = false;
          setTimeout(() => {
            this.showSmallTip = false;
            this.$store.commit("changeShowCollect", false);
            this.$store.commit("changeSId", 0);
          }, 1000);
        });
    },
    createP() {
      this.showAdd = true;
    },
    setTop() {
      // topH 卷上去的高度
      let topH =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // documentHeight 为可视窗口的高度
      let documentHeight = document.documentElement.clientHeight;
      this.h = Math.floor(topH + documentHeight / 2);
      let mcm = document.querySelector(".mod-collect-main");
      console.log(mcm.style);
      mcm.style.top = this.h - 250 + "px";
    },
    getPlaylists() {
      this.axios({
        url:
          "/user/playlist?limit=1000&uid=" +
          this.uid +
          "&timerstamp=" +
          Date.now(),
      })
        .then((res) => {
          for (let item of res.data.playlist) {
            if (item.creator.userId == this.uid) {
              this.flag++;
            } else {
              break;
            }
          }
          this.playlists = res.data.playlist.slice(0, this.flag);
          console.log(this.playlists);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    moveA(e) {
      let el = document.getElementById("collectMain");
      e = e || window.event;
      // 鼠标到myAdd的距离
      var disX = e.clientX - el.offsetLeft;
      var disY = e.clientY - el.offsetTop;
      document.onmousemove = function (e) {
        var l = e.clientX - disX;
        var t = e.clientY - disY;
        if (l <= 250) {
          el.style.left = "250px";
        } else if (l + 250 >= document.body.clientWidth) {
          el.style.left =
            document.body.clientWidth - 8 - el.offsetWidth / 2 + "px";
        } else {
          el.style.left = l + "px";
        }
        if (t <= 0) {
          el.style.top = "0px";
        } else if (t >= document.body.clientHeight - el.offsetHeight) {
          el.style.top = document.body.clientHeight - el.offsetTop - +"px";
        } else {
          el.style.top = t + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    },
  },
};
</script>

<style>
.mod-collect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1010;
}
.mod-collect-main {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  height: 500px;
  width: 530px;
  background-color: var(--color-theme-light-5);
  border-radius: 10px;
  box-shadow: 0 0 10px 3px #999;
  overflow: hidden;
  z-index: 105;
}
.mod-collect-hd {
  padding: 0 10px 0 20px;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  font-size: 20px;
  color: #f2f2f2;
  background-color: var(--color-theme);
  cursor: move;
}
.mod-collect-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.mod-collect-hd .close .iconfont {
  font-size: 16px;
}
.mod-collect-bd {
  position: relative;
  width: 530px;
  height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
}
.collect-add,
.collect-item {
  height: 70px;
  width: 100%;
  padding: 6px 20px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
}
.collect-add {
  background-color: #c6c6c6;
}
.collect-add .collect-item-l .iconfont {
  display: inline-block;
  margin: 8px 0 0 9px;
  font-size: 40px;
  font-weight: 700;
  color: #999;
}
.collect-add .collect-item-add {
  display: block;
  float: left;
  margin: 0 10px;
  height: 58px;
  line-height: 58px;
  font-weight: 400;
}
.collect-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.collect-item-l {
  float: left;
  width: 58px;
  height: 58px;
  overflow: hidden;
}
.collect-item-l img {
  width: 58px;
  height: 58px;
}
.collect-item-r {
  float: left;
  margin-left: 10px;
}
.collect-item-r .collect-item-name {
  height: 30px;
  line-height: 30px;
  font-weight: 400;
}
.collect-item-r .collect-item-num {
  font-size: 14px;
  font-weight: 400;
  color: #999;
}
</style>